<template>
  <frame-view :class="$theme==='one'?'index':'indexTwo'"  showTabbar>

    <p class="title" style="margin-left: 8px">个人中心</p>
    <div style="margin-left: 12px;display: flex;margin-top: 52px">
      <img src="./image/我的／头像@2x.png" style="width: 120px;height: 120px;border-radius: 60px">
      <div style="display: flex;flex-direction: column;justify-content: center;margin-left: 32px">
        <p style="display: flex;align-items: center;color: #fff" @click="updateName">
          爱创云 <img src="./image/icon-编辑@2x.png" style="width: 36px;height: 36px;margin-left: 16px">
        </p>
        <div style="margin-top: 16px;display: flex;font-size: 24px;">
          <p
            style="width: 136px;height: 40px;background: #EFFFF5;border-radius: 20px;display: flex;align-items: center;justify-content: center">
            <img src="./image/已认证@2x.png" style="width: 24px;height: 24px;">
            <span style="margin-left: 8px;color: #20C76C">已认证</span>
          </p>
          <p
            style="width:160px;margin-left: 12px;height: 40px;background: #EFFFF5;border-radius: 20px;display: flex;align-items: center;justify-content: center">
            <img src="./image/团队管理@2x.png" style="width: 24px;height: 24px;">
            <span style="margin-left: 8px;color: #1869ff">团队管理</span>
          </p>


        </div>

      </div>


    </div>
    <div style="width: 710px;background: #FFFFFF;border-radius: 20px;padding-bottom: 32px">
      <div
        style="height: 84px;background: linear-gradient( 151deg, #f8feff 0%, #ebf7ff 100%);margin-top: 24px;border-top-left-radius: 32px;border-top-right-radius: 32px;">
        <div style="height: 84px;line-height: 84px;display: flex;justify-content: space-between">
          <div style="margin-left: 32px;font-weight: 500;font-size: 36px;display: flex;align-items: center;color: #222222;">
            我的钱包
            <!--            <img src="./image/查看@2x.png" style="width: 36px;height: 36px;margin-left: 16px">-->
          </div>
          <div style="font-size: 28px;color: #222222;margin-right: 24px" @click="goPage('/index/earnings')">
            提现记录
          </div>

        </div>

      </div>
      <div style="display: flex;height: 78px;margin-top: 60px">
        <div style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center" @click="goPage('/index/withdraw')">
          <p style="font-size: 40px;">
            <span style="font-size: 28px;">￥</span>1893.04
          </p>
          <p style="font-size: 24px;color: #A8A8A8;display: flex;align-items: center;">
            累计收益(元)
          </p>
        </div>
        <div style="display: inline-flex;height: 100%;border-right: #000000 1px solid;opacity: 0.16;"></div>
        <div style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center"  @click="goPage('/index/withdraw')">
          <p style="font-size: 40px;">
            <span style="font-size: 28px;">￥</span>18.00
          </p>
          <p style="font-size: 24px;color: #A8A8A8;display: flex;align-items: center;">
            账户余额(元)
          </p>
        </div>


      </div>
      <van-button style="margin: 60px auto 0;width: 646px;height: 80px" round block type="info" @click="goPage('/index/apply')"
                  native-type="submit">提现</van-button>
    </div>
    <div style="padding: 0 26px  ;border-radius: 30px;font-size: 28px;background-color: #fff;margin-top: 20px">
      <div class="item">
        <p style="display: flex;align-items: center">
          <img v-if="$theme==='one'"  src="./image/icon_网络提速@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          <img v-else src="./imageTwo/icon_网络提速@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          官方网络
        </p>
        <van-icon name="arrow" color="#cecece" />
      </div>
      <div class="item" @click="goPage('/my/address')">
        <p style="display: flex;align-items: center">
          <img v-if="$theme==='one'"  src="./image/icon_网络提速@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          <img v-else src="./imageTwo/icon_网络提速@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          收货地址
        </p>
        <van-icon name="arrow" color="#cecece" />
      </div>
      <div class="item" @click="showShare = true">
        <p style="display: flex;align-items: center">
          <img  v-if="$theme==='one'"  src="./image/icon_邀请好友@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          <img  v-else src="./imageTwo/icon_邀请好友@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          邀请好友
        </p>
        <van-icon name="arrow" color="#cecece" />
      </div>
      <div class="item" @click="goPage('/index/often')">
        <p style="display: flex;align-items: center">
          <img v-if="$theme==='one'"  src="./image/icon_常见问题@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          <img v-else src="./imageTwo/icon_常见问题@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          常见问题
        </p>
        <van-icon name="arrow" color="#cecece" />
      </div>
      <div class="item" @click="goPage('/my/realName')">
        <p style="display: flex;align-items: center">
          <img v-if="$theme==='one'"  src="./image/icon_实名认证@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          <img v-else src="./imageTwo/icon_实名认证@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          实名认证
        </p>
        <van-icon name="arrow" color="#cecece" />
      </div>
      <div class="item" @click="goPage('/my/order')">
        <p style="display: flex;align-items: center">
          <img v-if="$theme==='one'"  src="./image/icon-设置@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          <img v-else src="./imageTwo/icon-设置@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          其他设置
        </p>
        <van-icon name="arrow" color="#cecece" />
      </div>
    </div>

    <div style="padding: 0 26px  ;border-radius: 30px;font-size: 28px;background-color: #fff;margin-top: 20px">
      <div class="item">
        <p style="display: flex;align-items: center">
          <img v-if="$theme==='one'"  src="./image/icon-下载app@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          <img v-else src="./imageTwo/icon-下载app@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          下载app
        </p>
        <van-icon name="arrow" color="#cecece" />
      </div>
      <div class="item" @click="goPage('/my/about')">
        <p style="display: flex;align-items: center">
          <img v-if="$theme==='one'"  src="./image/icon_关于我们@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          <img v-else src="./imageTwo/icon_关于我们@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          关于我们
        </p>
        <van-icon name="arrow" color="#cecece" />
      </div>
      <div class="item">
        <p style="display: flex;align-items: center" @click="showLogin = true">
          <img v-if="$theme==='one'"  src="./image/icon_退出登录@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          <img v-else src="./imageTwo/icon_退出登录@2x.png" style="width: 48px;height: 48px;margin-right: 12px">
          退出登录
        </p>
        <van-icon name="arrow" color="#cecece" />
      </div>
    </div>
    <div style="height: 40px"></div>

    <u-popup v-model="nameShow" @close="closeName" title="编辑姓名" @confirm="confirmName">
     <van-field
       v-model="name"
       style="margin-top: 20px"
       name="姓名"
       label="姓名"
       placeholder="姓名"></van-field>


    </u-popup>
    <u-popup title="编辑姓名" :show="nameShow" @close="closeName" @confirm="confirmName">
      <van-form style="margin-top: 48px;padding-bottom: 76px">
        <van-field
          border
          v-model="name"
          name="姓名"
          label="姓名"
          label-align="right"
          placeholder="姓名"
        />
      </van-form>
    </u-popup>
    <u-confirm :show-title="false" position="center" :show="showLogin" @close="closeLogin" @confirm="confirmLogin">
      <div style="font-weight: bold;font-size: 32px;color: #262626;;width: 592px;text-align: center;padding: 72px 0  48px ;">
        确认退出登录吗？
      </div>

    </u-confirm>
    <u-confirm :show-title="false" position="center" :show="showShare" @close="closeShare" @confirm="confirmShare">
      <div style="padding: 28px 48px;font-size: 28px;text-align: center;width: 582px">
        <p>分享码</p>
        <img src="./image/code.png" style="width: 380px;height: 380px;margin-top: 40px"/>
        <p style="line-height: 40px;margin-top: 40px">长按二维码图片分享</p>
        <p style="line-height: 40px;">被邀请人打开图片长按识别二维码</p>

      </div>

    </u-confirm>
  </frame-view>
</template>

<script>
import uECharts from '@/components/u-echerts.vue';
import * as echarts from 'echarts';
import UPopup from '@/components/u-popup.vue';
import UConfirm from '@/components/u-confirm.vue';

export default {
  props: {},
  name: 'my',
  data() {
    return {
      image: require('./image/位图@2x.png'),
      name:'',
      nameShow: false,
      active: 0,
      showLogin: false,
      showShare: false
    };
  },
  computed: {},
  created() {
  },
  mounted() {
  },
  watch: {},
  methods: {
    goPage(path) {
      this.$router.push(path);
    },
    closeName() {
      this.nameShow = false;
    },
    confirmName() {
      this.nameShow = false;
    },
    updateName() {
      console.log('updateName');
      this.nameShow = true;
    },
    closeLogin() {
      this.showLogin = false;
    },
    confirmLogin() {
      this.showLogin = false;
    },
    closeShare() {
      this.showShare = false;
    },
    confirmShare() {
      this.showShare = false;
    }
  },
  components: {
    UConfirm,
    UPopup,
    // [Button.name]: Button
    uECharts
  }
};
</script>

<style scoped lang="scss">
.arrow-down {
  color: #A8A8A8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding-bottom: 20px;
}

.ECharts_bottom {
  margin-left: 20px;
  border-radius: 28px;
  width: 128px;
  height: 56px;
  background-color: #f4f4f4;
  color: #626262;
  line-height: 56px;
  text-align: center;
  transition: all 0.3s;

  &.active {
    background-color: #000;
    color: #FFFFFF;
  }
}

.transition {

  transition: all 0.3s;
}

.title {
  width: 192px;
  height: 48px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  padding: 20px 0 52px;
  color: #FFFFFF;
  line-height: 48px;
  text-align: left;
  font-style: normal;
  margin-top: 20px;
}

.index {
  background-image: url('./image/位图@2x.png');
  background-size: 100% 50%;
  background-repeat: no-repeat;
  display: flex;
  font-size: 28px;
}
.indexTwo {
  //background-size: 100% 50%;
  background: linear-gradient(180deg, #1A9988 0%, #F7F7F7 50%) no-repeat;
  display: flex;
  font-size: 28px;
}


.item {
  height: 100px;
  line-height: 100px;
  border-bottom: 1px solid #f2f3f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  &:last-child {
    border-bottom: none;
  }
}
</style>
